<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="status_bar_nav"></view>
		<view class="logo">
			<image src="../../static/images/logoImg.png" mode="widthFix"></image>
		</view>
		<view class="loginBox">
			<view class="loginTitle">
				<view>用户登录</view>
			</view>
			<view class="loginInfo">
				<form @submit="$u.debounce(login, 500)" :model="form" ref="uForm">
					<view class="inputBox">
						<view>
							<u-icon class="uIcon" name="account" size="32"></u-icon>
							账号
						</view>
						<input type="tel" v-model="form.account" prop="account" placeholder="请输入手机号或代理商号" />
					</view>
					<view class="inputBox">
						<view>
							<u-icon class="uIcon" name="lock" size="32"></u-icon>
							密码
						</view>
						<input type="text" v-model="form.password" prop="password" v-bind:password="isShowPassword"
							placeholder="请输入密码" />
						<view class="showPassword" @click="changePwdStatus">
							<image :src="eyeIcon" mode="aspectFill"></image>
						</view>
					</view>
					<view class="forget">
						<view class="agreement">
							<u-checkbox class="agreement-box" v-model="check" @change="rememberPwd"
								active-color="#fb4535"></u-checkbox>
							<view class="agreement-text">记住密码</view>
						</view>
					</view>
					<button class="loginBtn" form-type="submit" hover-class="active">
						登 录
					</button>
					<view @click="$u.route('/pages/login/forgetUp')" class="forgetNum">忘记密码？</view>
					<!-- 协议政策 -->
					<view class="loginPolicyMain flex align-center">
						<u-checkbox class="policyCheckbox" v-model="disabled" @change="checkboxChange"
							active-color="#fb4535"></u-checkbox>我已阅读
						<navigator class="text firstText" url="/pages/setting/agreement" hover-class="none">《服务协议》
						</navigator>
						<navigator class="text" url="/pages/setting/yszc" hover-class="none">
							《隐私政策》</navigator>
					</view>
				</form>
			</view>
		</view>
		<u-toast ref="uToast" />
		<toast title="登录中..."></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					account: "",
					password: "",
				},
				disabled: true,
				agreement: false,
				eyeIcon: "../../static/images/eyeclose.png",
				isShowPassword: true,
				check: true,
			};
		},
		mounted() {
			//页面加载完成，获取本地存储的用户名及密码
			const account = uni.getStorageSync("account");
			const password = uni.getStorageSync("password");
			// console.log("22",username)
			if (account && password) {
				this.form.account = account;
				this.form.password = password;
			} else {
				this.form.account = "";
				this.form.password = "";
			}
		},
		methods: {
			login() {
				let that = this;
				if (that.form.account == "") {
					that.$refs.uToast.show({
						title: "请输入用户账号",
						type: "default",
					});
					return;
				}

				if (that.form.password == "") {
					that.$refs.uToast.show({
						title: "请输入用户密码",
						type: "default",
					});
					return;
				}
				if (!that.disabled) {
					that.$refs.uToast.show({
						title: "请阅读服务协议与隐私政策",
						type: "default",
					});
					return;
				}

				uni.getNetworkType({
					success: function(res) {
						let networkType = res.networkType;
						console.log(networkType);
						if (
							networkType == "3G" ||
							networkType == "4g" ||
							networkType == "5g" ||
							networkType == "wifi" ||
							networkType == "unknown"
						) {
							that.$loading(true)
							setTimeout(() => {
								let $clientId = "";
								// #ifdef APP-PLUS
								const clientInfo = plus.push.getClientInfo();
								if (clientInfo) {
									$clientId = clientInfo.clientid;
								}
								// #endif
								let params = {
									un: that.form.account,
									up: that.form.password,
									clientId: $clientId,
								};
								params = that.$tools.aesEncryptBat(that, params, "un,up");
								that.$u.api.login(params).then((res) => {
										if (res.status == 200) {
											// 打印调用成功回调
											let datas = res.result;
											// #ifdef APP-PLUS
											let version = plus.runtime.version;
											datas.version = version;
											// #endif
											datas = that.$tools.aesDecryptBat(
												that,
												datas,
												"account,identity_number"
											);
											uni.setStorageSync("loginInfo", datas);
											if (that.check) {
												//用户勾选“记住密码”
												uni.setStorageSync("account", that.form.account);
												uni.setStorageSync("password", that.form.password);
											} else {
												//用户没有勾选“记住密码”
												uni.removeStorageSync("account");
												uni.removeStorageSync("password");
											}
											uni.switchTab({
												url: "/pages/sy/sy",
											});
										} else {
											that.$refs.uToast.show({
												title: res.msg,
												type: "default",
											});
										}
									})
									.catch((res) => {
										if (res.errMsg == "request:fail timeout") {
											this.$u.toast("请求超时，请重试!");
										} else if (res.errMsg == "request:fail") {
											this.$u.toast("请求失败，请重试");
										} else {
											 this.$u.toast("请求失败，请重试");
										}
										this.$loading(false);
									});
							}, 1500);
						} else {
							uni.showModal({
								title: "温馨提示",
								content: "当前网络不佳，请检查网络",
								confirmText: "确认",
								cancelText: "取消",
								confirmColor: "#fb4535",
							});
						}
					},
				});
			},

			// 修改密码现实图标
			changePwdStatus() {
				this.isShowPassword = !this.isShowPassword;
				if (this.isShowPassword) {
					this.eyeIcon = "../../static/images/eyeclose.png";
				} else {
					this.eyeIcon = "../../static/images/eyeopen.png";
				}
			},

			//记住密码
			rememberPwd() {
				this.check = !this.check;
			},
			// 协议政策
			checkboxChange() {
				this.disabled = !this.disabled;
			},
		},
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 70rpx;
		width: 100%;

		.logo {
			width: 140rpx;
			margin: 80rpx 0 30rpx;
		}

		.loginBox {
			border-radius: 15rpx;
			margin-bottom: 80rpx;
			position: relative;
			z-index: 9;

			.loginTitle {
				font-size: 50rpx;
				letter-spacing: 1rpx;
				font-weight: 600;
				color: #5b5b5b;
			}

			.loginInfo {
				.inputBox {
					position: relative;
					padding-top: 20rpx;

					view {
						position: relative;
						height: 80rpx;
						letter-spacing: 3rpx;
						padding-bottom: 16rpx;
						line-height: 80rpx;
						font-size: 32rpx;

						.uIcon {
							margin-right: 5rpx;
						}

						image {
							position: absolute;
							height: 50%;
							right: 8rpx;
							top: 5rpx;
						}
					}

					input {
						height: 100rpx;
						border: 1rpx solid #e6e6e6;
						border-radius: 50rpx;
						padding-left: 30rpx;
						font-size: 32rpx;
					}

					.showPassword {
						position: absolute;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						right: 0;
						bottom: 20rpx;
						margin-right: 20rpx;
					}
				}

				.forget {
					color: #a2a2a2;
					padding: 25rpx 0 45rpx 0;
					text-align: center;

					.agreement {
						display: flex;

						.agreement-text {
							transform: translateX(-5rpx);
							font-size: 32rpx;
						}
					}
				}

				.active {
					transform: translate(1rpx, 1rpx);
				}

				button {
					margin-top: 30rpx;
					font-size: 30rpx;
					color: #fff;
					background-image: linear-gradient(to left, #fc6306 20%, #fe913d 100%);
					border-radius: 60rpx;
				}
			}
		}

		.forgetNum {
			text-align: center;
			letter-spacing: 3rpx;
			color: #9a9a9a;
			padding: 30rpx 0 0 30rpx;
		}

		.registered {
			position: relative;
			top: -80rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			width: 70%;
			font-size: 26rpx;
			background-color: #fff;
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			box-shadow: 0 0 12rpx #999;
			z-index: 1;
			color: #fb4535;
			font-weight: bold;

			.text {
				color: #fb4535;
				font-weight: bold;
			}
		}
	}

	.agreement-box {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		position: relative;
		top: 5rpx;
	}

	.loginPolicyMain {
		width: 100%;
		margin: 0 auto;
		padding-top: 80rpx;

		.policyCheckbox {
			margin-left: 50rpx;
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.text {
			color: #fb4535;
			font-weight: bold;
			position: relative;
			padding: 0 5rpx;

			&.firstText::after {
				content: "";
				display: block;
				width: 4rpx;
				height: 26rpx;
				background-color: #fb4535;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -13rpx;
			}
		}
	}

	.loginBtn {
		&::after {
			content: "";
			border: none;
		}
	}
</style>
